<!-- filepath: c:\Users\HH\Desktop\旅游服务平台\src\components\Footer.vue -->
<template>
  <footer class="footer">
    <div class="footer-main">
      <div class="container">
        <el-row :gutter="30">
          <!-- 左侧品牌区域 -->
          <el-col :xs="24" :sm="24" :md="8">
            <div class="brand-section">
              <div class="brand-logo">
                <el-icon class="logo-icon"><Place /></el-icon>
                <span>汉中旅游定制</span>
              </div>
              <p class="brand-desc">专注于提供汉中地区高品质旅行服务，让每一次旅程都成为难忘的记忆。</p>
              <div class="social-links">
                <el-button circle><el-icon><Position /></el-icon></el-button>
                <el-button circle><el-icon><ChatDotRound /></el-icon></el-button>
                <el-button circle><el-icon><Phone /></el-icon></el-button>
              </div>
            </div>
          </el-col>

          <!-- 中间导航区域 -->
          <el-col :xs="24" :sm="12" :md="8">
            <div class="footer-links">
              <div class="links-group">
                <h3>热门目的地</h3>
                <ul>
                  <li @click="goToDestination('')">龙头山</li>
                  <li @click="goToDestination('')">汉山</li>
                  <li @click="goToDestination('')">天汉楼</li>
                  <li @click="goToDestination('')">湿地公园</li>
                </ul>
              </div>
              <div class="links-group">
                <h3>快速导航</h3>
                <ul>
                  <li @click="$router.push('/routes')">旅游攻略路线</li>
                  <li @click="$router.push('/customize')">私人定制</li>
                  <li @click="$router.push('/stories')">旅行故事</li>
                  <li @click="$router.push('/consult')">在线咨询</li>
                </ul>
              </div>
            </div>
          </el-col>

          <!-- 右侧联系区域 -->
          <el-col :xs="24" :sm="12" :md="8">
            <div class="contact-section">
              <h3>联系我们</h3>
              <div class="contact-info">
                <p><el-icon><Phone /></el-icon> 400-888-8888</p>
                <p><el-icon><Message /></el-icon> contact@hanzhong.com</p>
                <p><el-icon><Location /></el-icon> 汉中市汉台区陕西理工大学</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="footer-bottom">
      <div class="container">
        <div class="bottom-content">
          <p>© 汉中旅游定制. 保留所有权利</p>
          <div class="bottom-links">
            <a href="#">服务条款</a>
            <a href="#">隐私政策</a>
            <a href="#">网站地图</a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'PageFooter',
  methods: {
    goToDestination(name) {
      this.$router.push({
        path: '/destinations',
        query: { name: encodeURIComponent(name) }
      });
    }
  }
};
</script>

<style scoped>
.footer {
  background: #444c54;
  color: #ffffff;
}

.footer-main {
  padding: 15px 0; /* 从20px减少到15px */
}

.brand-section {
  margin-bottom: 8px; /* 从12px减少到8px */
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 8px; /* 从10px减少到8px */
  background: linear-gradient(45deg, #3498db, #2ecc71);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-desc {
  color: #ecf0f1;
  line-height: 1.6;
  margin-bottom: 8px; /* 从10px减少到8px */
  opacity: 0.8;
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-links .el-button {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  transition: all 0.3s ease;
}

.social-links .el-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}

.footer-links {
  display: flex;
  gap: 12px; /* 从15px减少到12px */
  margin-bottom: 8px; /* 从12px减少到8px */
}

.links-group h3 {
  color: #3498db;
  margin-bottom: 6px; /* 从8px减少到6px */
  font-size: 1.1rem;
}

.links-group ul {
  list-style: none;
  padding: 0;
}

.links-group li {
  margin-bottom: 3px; /* 从4px减少到3px */
  color: #ecf0f1;
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.3s ease;
}

.links-group li:hover {
  opacity: 1;
  color: #3498db;
  transform: translateX(5px);
}

.contact-section {
  margin-bottom: 8px; /* 从12px减少到8px */
}

.contact-section h3 {
  color: #3498db;
  margin-bottom: 6px; /* 从8px减少到6px */
  font-size: 1.1rem;
}

.contact-info {
  margin-bottom: 8px; /* 从10px减少到8px */
}

.contact-info p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px; /* 从6px减少到4px */
  color: #ecf0f1;
  opacity: 0.8;
}

.qr-code {
  width: 60px; /* 从80px减少到60px */
  height: 60px; /* 从80px减少到60px */
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.qr-placeholder {
  color: #ecf0f1;
  font-size: 0.9rem;
  opacity: 0.8;
}

.footer-bottom {
  background: rgba(0, 0, 0, 0.2);
  padding: 8px 0; /* 从10px减少到8px */
}

.bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ecf0f1;
  opacity: 0.8;
}

.bottom-links {
  display: flex;
  gap: 20px;
}

.bottom-links a {
  color: #ecf0f1;
  text-decoration: none;
  transition: color 0.3s ease;
}

.bottom-links a:hover {
  color: #3498db;
}

@media (max-width: 768px) {
  .footer-main {
    padding: 12px 0; /* 从15px减少到12px */
  }

  .footer-links {
    flex-direction: column;
    gap: 8px; /* 从12px减少到8px */
  }

  .bottom-content {
    flex-direction: column;
    gap: 10px; /* 从15px减少到10px */
    text-align: center;
  }

  .contact-section {
    text-align: center;
  }

  .qr-code {
    margin: 0 auto;
  }

  .social-links {
    justify-content: center;
  }
}
</style>